<script setup lang="ts">
import { ref } from 'vue'
import { useMemberStore, useDeviceStore } from '@/stores'
import { bindDeviceApi } from '@/services/my'
//import { getDeviceInfoApi } from '@/services/index'
import { onLoad } from '@dcloudio/uni-app'
const memberStore = useMemberStore()
const deviceStore = useDeviceStore()
const show = ref(false)
// 弹出层组件
const popup = ref<UniHelper.UniPopupInstance>()
const popupOpen = () => {
  if (!memberStore.profile) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  popup.value?.open()
}
const closepopup = () => {
  show.value = false
}
//查看设备列表
const viewdevice = () => {
  if (!memberStore.profile) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  // console.log(deviceStore.deviceList)
  if (!deviceStore.deviceList || deviceStore.deviceList.length === 0) {
    uni.showToast({
      title: '暂无设备，请先绑定设备',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  uni.navigateTo({
    url: '/pages/equipment-list/equipment-list',
  })
}
//蓝牙连接
const deviceNum = ref('')
onLoad(() => {
  /* if (deviceStore.devicedetail) {
    deviceNum.value = deviceStore.devicedetail.deviceNum
  } */
})

//绑定设备
const binddevice = async (deviceNum: string) => {
  const mes = await bindDeviceApi({
    bindFlg: 1,
    deviceNum,
    userId: memberStore.profile!.id,
  })
  console.log(mes)
  if (mes.msg === '对象正常') {
    closepopup()
    uni.showToast({
      title: '绑定成功',
      icon: 'none',
      duration: 3000,
    })
    popup.value?.close()
    //修改store中的设备列表
    await deviceStore.getDeviceList()
    //请求设备实时数据
    await deviceStore.getDeviceData()
  } else {
    uni.showToast({
      title: '绑定失败',
      icon: 'none',
      duration: 1000,
    })
  }
}

//扫描二维码
const qrconntion = () => {
  uni.scanCode({
    success: (res) => {
      console.log(res)
      deviceNum.value = JSON.parse(res.result).deviceNum
      console.log(JSON.parse(res.result))
      console.log('二维码绑定' + deviceNum.value)
      binddevice(deviceNum.value)
    },
    fail: (fail) => {
      uni.showToast({
        title: '扫描失败,请重试',
        icon: 'none',
        duration: 1000,
      })
      console.log(fail)
    },
  })
}
//退出登录
const logout = () => {
  uni.showModal({
    title: '温馨提示',
    content: '确定要退出登录吗？',
    showCancel: true,
    success: ({ confirm, cancel }) => {
      if (confirm) {
        sure()
      }
    },
  })
}
const sure = () => {
  memberStore.clearProfile()
  deviceStore.clearDeviceData()
  deviceStore.clearDeviceList()
}
//跳转蓝牙设备列表页
const drawBluetoothLink = () => {
  uni.navigateTo({
    url: '/pages/bt-device-list/bt-device-list?type=bind',
  })
  popup.value?.close()
}
//登录
const login = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  })
}
//修改资料
const editprofile = () => {
  if (!memberStore.profile) {
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      duration: 1000,
    })
    return
  }
  uni.navigateTo({
    url: '/pages/my-info/my-info',
  })
}
</script>

<template>
  <view class="container">
    <view class="avatar">
      <image :src="memberStore.profile.picture" mode="scaleToFill" v-if="memberStore?.profile?.picture" />
      <image src="@/static/default-avatar.svg" mode="scaleToFill" v-else />
    </view>
    <view class="wxLogin" @click="login" v-if="!memberStore.profile">{{ '微信授权' }}</view>
    <view class="wxLogin" v-else>{{ memberStore.profile?.nickname ? memberStore.profile?.nickname : '微信用户' }}</view>
    <view class="function">
      <uni-group>
        <view class="option" @click="popupOpen">
          <view class="icon"> <img src="@/static/bidndevice.svg" alt="" /> </view> 设备绑定
          <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
        </view>
        <view class="option">
          <view class="icon"> <img src="@/static/aboutus.svg" alt="" /> </view>关于我们
          <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
        </view>
        <view class="option"
          ><view class="icon"> <img src="@/static/help.svg" alt="" /> </view> 使用帮助
          <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
        </view>
        <view class="option" @click="viewdevice">
          <view class="icon"> <img src="@/static/devicelist.svg" alt="" /> </view>我的设备
          <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
        </view>
        <view class="option" @click="editprofile">
          <view class="icon"> <img src="@/static/myinfo.svg" alt="" /> </view> 个人信息
          <view class="right-arrow"> <img src="@/static/right-arrow.svg" alt="" /> </view>
        </view>
      </uni-group>
    </view>
    <button v-if="memberStore.profile" class="loginOut" @click="logout">退出登录</button>
    <uni-popup ref="popup" type="center" background-color="#fff">
      <view class="bind-method">
        <view class="select">选择绑定方式</view>
        <view class="method-box">
          <view class="method" @click="drawBluetoothLink">
            <img src="@/static/bluetooth.svg" alt="" class="icon" /> 蓝牙连接
            <img src="@/static/right-arrow.svg" alt="" class="right-arrow" />
          </view>
          <view class="method" @click="qrconntion">
            <img src="@/static/qrcode.svg" alt="" class="icon" /> 扫描二维码
            <img src="@/static/right-arrow.svg" alt="" class="right-arrow" />
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss">
page {
  height: 100%;
  overflow: hidden;
  .container {
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(@/static/center_bg.png);
    background-size: 100% auto;
    padding-top: 134.615rpx;
    background-color: #f8f8f8;
    .avatar {
      margin: 0 auto;
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      background-color: #eee;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .wxLogin {
      margin: 20rpx auto;
      font-size: 26rpx;
      width: 173.077rpx;
      height: 46.154rpx;
      line-height: 46.154rpx;
      color: #ffff;
      background-color: rgba(219, 219, 219, 0.5);
      border-radius: 23.077rpx;
      text-align: center;
    }
    .function {
      width: 653.846rpx;
      border-color: #ffffff;
      margin: 192.308rpx auto;
      .option {
        height: 76.923rpx;
        display: flex;
        align-items: center;
        .icon {
          height: 40.385rpx;
          width: 40.385rpx;
          margin-right: 19.231rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .right-arrow {
          margin-left: auto;
          image {
            width: 30.769rpx;
            height: 30.769rpx;
          }
        }
      }
    }
    .option {
      height: 76.923rpx;
      display: flex;
      align-items: center;
      .icon {
        margin-right: 19.231rpx;
        image {
          height: 34.615rpx;
          width: 34.615rpx;
        }
      }
      .right-arrow {
        margin-left: auto;
        image {
          width: 30.769rpx;
          height: 30.769rpx;
        }
      }
    }
    .loginOut {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 442.308rpx;
      height: 80rpx;
      font-size: 28rpx;
      border-radius: 72rpx;
      color: #fff;
      background-color: #28bb9c;
    }
    .bind-method {
      width: 576.923rpx;
      height: 421.154rpx;
      .select {
        margin-left: 36.538rpx;
        margin-top: 25rpx;
        width: 207.692rpx;
        height: 48.077rpx;
        line-height: 48.077rpx;
        color: rgba(0, 0, 0, 1);
        font-size: 34.615rpx;
      }
      .method-box {
        margin: 57.692rpx 46.154rpx 0;
        .method {
          height: 115.385rpx;
          display: flex;
          align-items: center;
          padding-left: 15.385rpx;
          //font-size: 30.769rpx;
          &:first-child {
            border-bottom: 1.538rpx solid #e1e1e1;
          }
          .icon {
            width: 50rpx;
            height: 50rpx;
            margin-right: 38.462rpx;
          }
          .right-arrow {
            margin-left: auto;
            height: 28.846rpx;
            width: 28.846rpx;
          }
        }
      }
    }
  }
}
</style>
